<template>
	<div id="classifybody">
		<h1 style="font-size: 30px;">分类管理</h1>
		<el-row :gutter="20">
			<el-col :span="18" :xs="16">
				<el-input v-model="classifyName" name="classifyName" maxlength="20" show-word-limit></el-input>
			</el-col>
			<el-col :span="4">
				<el-button @click="addClassify">添加分类</el-button>
			</el-col>
		</el-row>


		<el-row class="classifylist">
			<el-tag v-for="(c,index) in classifies" type="info" :key="c.classifyName">
				<span  >{{c.classifyName}}</span>
				<button @click="opendel(c.classifyId,index)"><span class="el-icon-delete"></span></button>
				<button @click="openUpdate(c.classifyName,c.classifyId)"><span
						class="el-icon-edit"></span></button>
			</el-tag>
		</el-row>
	</div>

</template>

<script>
	export default {
		name: 'Classify',
		data() {
			return {
				classifies: [],
				classifyName: '',
				classifyTab:[],
				editableTabsValue:''
			}
		},
		methods: {
			removeTab(targetName) {
				this.classifyTab.splice(targetName,1,this.classifyTab[targetName].title);
				this.classifyTab.length--;
			},
			loadClassify() {
				this.axios.get("/classify/select").then((res) => {
					this.classifies = res.data.data;
				})
			},
			addClassify() {
				let formdata = new FormData();
				if (this.classifyName == "") {
					this.$message({
						type: 'error',
						message: "请填写分类",
						showClose: true
					});
				} else {
					formdata.append('classifyName', this.classifyName);
					this.axios.post("/classify/add", formdata).then((res) => {
						if (res.data.success) {
							this.$message({
								type: 'success',
								message: res.data.msg,
								showClose: true
							});
						}
						this.classifies.splice(0, 0, this.classifyName);
						this.loadClassify();
					})
				}
			},
			opendel(id, index) {
				this.$confirm("此操作会永久删除该分类，是否继续？", "警告", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delTag(id, index);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: "已取消删除",
						showClose: true
					});
				});
			},
			delTag(id, index) {
				this.axios.get("/classify/delete/" + id)
					.then((res) => {
						if (res.data.success) {
							this.classifies.splice(index, 1);
							this.$message({
								type: 'success',
								message: res.data.msg,
								showClose: true
							});
							this.loadClassify();
						} else {
							this.$message({
								type: 'error',
								message: res.data.msg,
								showClose: true
							});
						}
					})
			},
			addTab(name){
				let newTabName = this.classifyTab.length + '';
				this.isShow=true;
				if(this.classifyTab.indexOf(name)!=-1){
					return;
				}
				else{
					this.classifyTab.push({
						title:name,
						name:newTabName
					});
					this.editableTabsValue=newTabName;
				}
			},
			openUpdate(name,id){
					this.$prompt("请输入新的分类名", "修改分类名", {
						confirmButtonText: '修改',
						cancelButtonText: '取消'
					}).then(({
						value
					}) => {
						if (value == name) {
							this.$message({
								type:'error',
								message:"新分类名与旧分类名重复",
								showClose:true
							});
							return;
						} 
						if(value == null || value == ""){
							this.$message({
								type:'error',
								message:"请填写新分类名",
								showClose:true
							});
							return;
						}
						else {
							this.updateClassify(value, id);
						}
					}).catch(()=>{
						this.$message({
							type:'info',
							message:"已取消修改",
							showClose:true
						});
					})
			},
			updateClassify(name, id){
					let data = new FormData();
					data.append("classifyId", id);
					data.append("classifyName", name);
					this.axios.post("/classify/update", data)
						.then((res) => {
							if (res.data.success) {
								this.$message({
									type:'success',
									message:res.data.msg,
									showClose:true
								});
								this.loadClassify();
							} else {
								this.$message({
									type:'error',
									message:res.data.msg,
									showClose:true
								});
							}
						});
			}
		},
		created() {
			this.loadClassify();
		},
		computed:{
			TabShow(){
				if(this.classifyTab.length>0){
					return true;
				}
				else{
					return false;
				}
			}
		}
	}
</script>

<style>

	#classifybody .el-row{
		margin: 20px 0px 20px 0px;
	}

	#classifybody .el-tag button {
		background-color: inherit;
		border: none;
		cursor: pointer;
	}

	#classifybody .el-tag {
		margin: 0px 10px 10px 0px;
		font-size: 15px;
		cursor: pointer;
		background-color: #C6E2FF;
		color: #444400;
	}

	#classifybody .el-tag:hover{
		color: #0074D9;
		border: 1px solid #0074D9;
	}

	#classifybody .el-tag .el-icon-delete:hover {
		color: red;
	}

	#classifybody .el-tag .el-icon-edit:hover {
		color: gold;
	}
</style>
